<template>
  <div>
    <h1>事件处理：</h1>
    <h2>示例一、通过 methods 实现事件函数绑定</h2>
    <el-button type="primary" v-on:click="add(count)">添加</el-button>

    <h2>示例二、获取原生 DOM 事件</h2>
    <el-button type="primary" v-on:click="get(count,$event)">添加</el-button>

    <h2>示例三、事件修饰符</h2>
    <!-- stop 案例 -->
    <div @click="clickTargetContainer">
      <el-button type="primary" @click.stop="clickTargetA">点我 stop 案例</el-button>
      <el-button type="primary" @click="clickTargetA">点我 无 stop 修饰</el-button>
    </div>

    <!-- submit.prevent 案例 -->
    <form method="get" action="/" @submit.prevent="submit">
      <button type="submit">点我提交表单</button>
    </form>

    <form method="get" action="https://www.baidu.com" @submit="submit">
      <button type="submit">点我提交表单</button>
    </form>

    <!-- capture 案例 -->
    <div v-on:click.capture="capture">
      <button @click.stop="clickTargetA">点我 capture 案例</button>
    </div>

    <!-- self 案例 -->
    <div @click.self="clickTargetContainer" style="padding: 20px;border: 1px solid #cccccc;">
      <button @click="clickTargetA">点我 self 案例</button>
    </div>

    <!-- once 案例 -->
    <div>
      <button @click.once="clickTargetA">点我 once 案例</button>
    </div>

    <h2>示例四、按键修饰符</h2>
    <el-input v-on:keyup.enter.native="login" v-model="count"></el-input>
    <p>{{keyup}}</p>

  </div>

</template>

<script>
export default {

  data () {
    return {
      msg: '计算属性',

      count: 10,

      keyup: 100,

    }
  },

  methods: {

    add (count) {
      console.log(count)
    },

    get (count, $event) {
      console.log(count)
      console.log($event)
    },

    clickTargetContainer () {
      this.$message('父级容器点击事件触发');
    },
    clickTargetA () {
      this.$message('按钮标签点击事件触发')
    },
    submit () {
      this.$message('提交表单了')
    },
    capture () {
      this.$message('虽然你点击的是内部元素，但是我先触发！')

    },

    login () {
      this.keyup = this.keyup + 1
      console.log(121313)
    }


  },


}
</script>


<style scoped>
</style>
